<!-- 横版大图，商品卡片 -->
<template>
	<view style="padding: 10px;border-bottom: 1px solid #F3F3F3;width: 100%;" :data-id="detail.store_shop_id"
		@click="click">
		<view class="topone" style="display: flex;">
			<view style="position: relative;">
				<image :src="detail.shop_image" style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
				<!-- <view style=" font-size: 12px;"> -->
				<!--        <view style="position: absolute;color: #FFFFFF; bottom: 10px; left: 5px;color: white;text-align: center; line-height: 18px;font-size: 12px;width: 68rpx;height: 36rpx;height: 18px;background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);border-radius: 8px 0px 8px 0px;opacity: 1;">-->
				<!--          {{detail.discount}}-->
				<!--        </view>-->
			</view>
			<view>
				<view style="margin-left: 10px;    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;">
					<view
						style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;">
						{{detail.shop_name}}
					</view>
					<view style="display: flex;flex-direction: row;">
						<view v-for="(tags,tagindex) in detail.shop_tags"
							style="background-color: #FFF0E4;padding: 6rpx 10rpx;margin-right: 10rpx;border-radius: 2px 2px 2px 2px;font-size: 20rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #FE811C;line-height: 30rpx;">
							{{tags}}
						</view>
					</view>
					<view
						style="font-size: 20rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">
						{{detail.shop_text}}
					</view>
					<view style="left: -9rpx;position: relative;">

						<u-rate :value="detail.shop_score" :disabled="true" activeColor="#FE811C"></u-rate>
					</view>
					<view v-if="detail.quan_text" style="display: flex;margin-top: 1px;margin: 0rpx 0rpx;">
						<!-- 		<image src="https://d-duomi.bigchun.com/images/shangbang/quan.png" style="width: 16px;height: 16.5px;"></image>
            <view class="lable" >{{detail.quan_text}}</view> -->
						<view v-if="detail.quan_text!=''">
							<image style="width: 32rpx;height: 32rpx;"
								src="https://d-duomi.bigchun.com/images/shangbang/quan.png"></image>
						</view>
						<view v-if="detail.quan_text!=''" class="lable">
							{{detail.quan_text}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="taocan" v-if="detail.store_goods.length>0">
			<view class="taocanone" v-for="(items,index) in  detail.store_goods" :key="index"
				:class="index==0?'margin_top16':''">
				<view style="display: flex;align-items: center">
					<view class="hui">惠</view>
					<view class="huiyuanjia">{{'￥'+items.vip_price}}</view>
					<view class="yuanjia">{{'￥'+items.price}}</view>
				</view>
				<view class="taocanname" style="color:#666666;">
					{{'【'+items.title+'】' + ' '+ items.subtitle}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
 *shoproGoodsCard - 商家列表卡片

 */
	export default {
		components: {},
		data() {
			return {};
		},
		props: {
			detail: {
				type: Object,
				default: () => {
					return {};
				}
			},
		},
		mounted() {},
		methods: {
			//点击商品
			click() {
				this.$emit('click');
			},
		}
	};
</script>

<style lang="scss">
	// 大商品卡片
	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.goods-img {
			width: 260rpx;
			height: 260rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
		}

		.card-right {
			width: 430rpx;
			height: 220rpx;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
			padding-top: 6rpx;

			.title-tag {
				transform: scale(0.9);
				position: relative;
				top: -6rpx;
			}
		}

		.subtitle-text {
			font-size: 24rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}

		.tag-box {
			border: 1rpx solid #ff0000;
			display: inline-block;
			font-size: 24rpx;
			line-height: 30rpx;
			padding: 0 10rpx;
			color: #ff0000;
			border-radius: 8rpx;
		}

		// 购物车
		.cart-box {
			.cart-btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				padding: 0;
				background: linear-gradient(90deg, #e9b461, #eecc89);
			}

			.buy-btn {
				width: 120rpx;
				line-height: 50rpx;
				background: linear-gradient(90deg, #e9b461, #eecc89);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}

		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.margin_top16 {
		margin-top: 16rpx;
	}

	.taocan {
		font-size: 24rpx;

		.taocanone {
			width: 85vw;
			display: flex;
			margin-bottom: 10rpx;
			align-items: center;
			overflow: hidden; //超出文本隐藏
			white-space: nowrap; //不换行，只显示一行
			text-overflow: ellipsis; //超出部分省略号显示

			.hui {
				width: 30rpx;
				height: 30rpx;
				background: linear-gradient(180deg, #F18103 0%, #FB550B 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				font-size: 22rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.huiyuanjia {
				color: #FE7F1A;
				font-size: 26rpx;
			}

			.yuanjia {
				color: #999999;
				text-decoration: line-through;
				padding-left: 12rpx;
			}

			.taocanname {
				max-width: 240px;
				width: 200px; //宽度
				overflow: hidden; //超出文本隐藏
				white-space: nowrap; //不换行，只显示一行
				text-overflow: ellipsis; //超出部分省略号显示
				margin-left: 6rpx;
			}
		}
	}
</style>